<template>
  <div>
    <!-- 开始从body第63行提取的HTML内容 -->
    <input id="topicId" type="hidden" value="195"/>
    <input id="isAdmin" type="hidden" value=""/>

    <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>


    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep on [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="wrapper new-light mobile-scene-min-width adaptive-min-height">
      <div class="page-main-content p-b-md">
        <div class="alert alert-warning none" id="VerifyTip"></div>
        <div class="row noMagrin x-initContent">
          <div class="col-md-8 noPadding" style="width: 67.6%; float: left;">
            <div class="qrgenerate-box">
              <div class="upload-wrapper upload-wrapper-media">
                <input id="imgfile" type="hidden" value=""/>
                <input id="filename" type="hidden" value=""/>
                <input id="mediaduration" type="hidden" value=""/>
                <input id="filepath" type="hidden"/>
                <input id="uptoken" type="hidden"/>

                <div class="upload-before" id="upload-before" style="">
                  <p class="text-xs text-grey advanced-edit advanced-editor-size" style="position: absolute;right: 24px;top: 20px;z-index: 1;display: inline-flex;">
                    <a class="cliLink link" data-new-create-multimedia="" data-new-create-multimedia-style="" href="javascript:;" rel="nofollow" style="padding:6px 0 6px 10px;font-size: 14px;line-height: 18px;display: inline-flex;align-items: center;border-radius: 2px;border: none;">
                      <i class="clifont anticon-gaojibianji" style="font-size: 14px;margin-right: 8px;padding-top: 1px;"></i>高级编辑
                    </a>
                  </p>

                  <div class="upload-before-default">
                    <i class="upload-icon clifont anticon-shangchuanyinshipin"></i>
                    <h2 class="upload-text">上传音视频</h2>
                    <p class="text-xs text-grey text-center upload-tip">
                      免费版限 <span style="color: rgba(0, 0, 0, 0.87);">5人</span> 播放试用，仅保留 <span style="color: rgba(0, 0, 0, 0.87);">30天</span>；付费版播放人数不限，长期有效，大小不限&nbsp;&nbsp;
                      <a class="text-blue" href="help/65917.html" target="_blank" title="音视频相关问题">常见问题</a>
                    </p>
                    <p class="text-xs" id="upload-first-tips">请先点此上传音视频</p>
                  </div>

                  <a class="cliLink" onclick="__CONSOLE_UTILS_.showAVIntroModal()" style="font-size: 12px;position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);z-index: 1;">查看音视频示例码</a>

                  <div class="dragtip drag">
                    <i class="clifont anticon-cli-upload"></i>
                    <div style="position: relative">
                      <p class="tip-text">文件拖到此处</p>
                    </div>
                  </div>

                  <div class="dragtip drop">
                    <i class="clifont anticon-cli-upload"></i>
                    <p class="tip-text">松开上传</p>
                  </div>

                  <input accept=".mp3, .m4a, .wav, .ogg, .asf, .au, .voc, .aiff, .rm, .svcd, .vcd, .mp4, .flv, .avi, .mov" class="uploadfile" data-pre-init="true" data-uptype="medias" disabled="disabled" id="filedatacode" name="Filedata" style="cursor:not-allowed;" title="" type="file"/>
                </div>

                <div class="uploading none uploading-h" id="uploading">
                  <i class="file-icon file-icon-other" id="multimedia-file-icon"></i>
                  <p class="file-name"></p>
                  <div style="margin-bottom: 8px;display: flex;align-items: center">
                    <div class="progress progress-xxs" style="flex: 1;margin-bottom: 0;display: block;margin-right: 8px;">
                      <div class="progress-bar green" style="width: 0%">0%</div>
                    </div>
                    <div class="abort-upload" style="cursor:pointer;line-height: 1">
                      <i class="clifont anticon-close-circle"></i>
                    </div>
                  </div>
                  <p class="m-t progress-text" style="margin-top: 0 !important;">上传中，请稍候...</p>
                </div>

                <div class="upload-success none upload-success-media" id="upload-success" style="position: relative; height:auto!important;">
                  <p class="text-xs grey45-link" style="position: absolute;right: 24px;top: 20px;z-index: 1;display: inline-flex;">
                    <a class="text-blue link" data-new-create-multimedia-style="" href="//console.cli.im/nedit/?pageFrom=frontBuild" rel="opener nofollow" style="padding:6px 0 6px 10px;font-size: 14px;line-height: 18px;border-radius: 2px;border: none;" target="_blank">
                      <i class="clifont anticon-gaojibianji" style="font-size: 14px;margin-right: 8px;padding-top: 1px;"></i>高级编辑
                    </a>
                  </p>

                  <div class="titleWrap">
                    <i class="cliIcon anticon-edit code-title-edit-icon"></i>
                    <textarea autosize="" id="multimediaTitle" placeholder="请填写标题，不填不显示" style="padding-top: 4px;padding-bottom: 4px;line-height: 1.5715;"></textarea>
                  </div>

                  <div class="multimedia-item-wrapper before-created-media" id="multimedia-item-wrapper">
                    <i class="file-icon" data-file-icon=""></i>
                    <div class="video">
                      <video preload="metadata" src=""></video>
                      <img alt="" class="poster" src=""/>
                      <img alt="" class="mask" src=""/>
                      <div class="play-icon">
                        <img alt="" class="player" src="../../assets/images/fe14b99adcf4.png"/>
                      </div>
                      <p class="fileDuration" id="fileDuration"></p>
                    </div>

                    <div class="media-info">
                      <div class="media-info-left">
                        <div class="media-info-title" style="margin-bottom: 8px;">
                          <p class="text-ellipsis" data-filename="" style="font-size: 16px;"></p>
                          <i class="cliIcon anticon anticon-edit video-title-edit-icon"></i>
                          <input class="ant-input video-title-input none" name="mediaName" placeholder="请输入音视频名称" type="text" value="">
                          <div class="audio-file-size"></div>
                        </div>

                        <div class="media-info-time-size" style="display: none;">
                          <p class="text-grey text-xs" id="filesize"></p>
                        </div>

                        <div class="audio-info">
                          <div class="audio-tracker"></div>
                          <div class="audio-timer">
                            <span class="start">00:00</span>
                            <span class="end"></span>
                          </div>
                        </div>

                        <div data-convert-status="" id="convertTip">
                          <span id="convertTipText"></span>
                          <i class="cliIcon anticon anticon-cli-question-o" id="convertTipIcon" style="visibility: hidden;"></i>
                        </div>
                      </div>

                      <p class="media-action">
                        <span class="action-item action-item-video none" id="delPoster">删除封面</span>
                        <span class="action-item action-item-video" id="uploadPoster" style="margin-left: 0">上传封面</span>
                        <span class="action-line action-item-video"></span>
                        <a class="x-closeBtn del-video action-item">删除</a>
                      </p>
                    </div>
                  </div>

                  <div class="convert-fail" id="convertFailBeforeCreate">
                    <i class="clifont anticon-cli-warm-o text-blue"></i>转码失败，请<span class="text-blue pointer reUpload" id="reUpload">重新上传</span>
                  </div>

                  <div class="convert-fail convert-fail-after-code" id="convertFailAfterCreate">
                    <i class="clifont anticon-cli-warm-o text-blue"></i>转码失败，请 <span class="text-blue pointer reUpload" id="goToEdit">前往高级编辑器</span> 重新上传
                  </div>

                  <div class="x-configPanel x-form">
                    <div class="x-row x-visibleAuthType" data-key="config-visitor">
                      <div class="x-label" style="align-self:flex-start;line-height:24px;">
                        查看权限
                      </div>
                      <div class="ant-radio-group ant-radio-group-outline">
                        <div class="ant-radio-wrapper" data-visitor-type="3">
                          <span class="ant-radio">
                            <input class="ant-radio-input" type="radio" value="3"/>
                            <span class="ant-radio-inner"></span>
                          </span>
                          <span>任何人</span>
                        </div>
                        <div class="ant-radio-wrapper" data-visitor-type="13">
                          <span class="ant-radio">
                            <input class="ant-radio-input" type="radio" value="13"/>
                            <span class="ant-radio-inner"></span>
                          </span>
                          <span>
                            所有成员
                            <i class="cliIcon anticon anticon-cli-question-o" onclick="event.stopPropagation();"></i>
                          </span>
                        </div>
                        <div class="ant-radio-wrapper auth-member" data-visitor-type="1">
                          <span class="ant-radio">
                            <input class="ant-radio-input" type="radio" value="1"/>
                            <span class="ant-radio-inner"></span>
                          </span>
                          <span>
                            <span>
                              指定成员
                              <i class="cliIcon anticon anticon-cli-question-o" onclick="event.stopPropagation();"></i>
                            </span>
                            <span style="margin-left: 4px">
                              <span class="cliLink" id="changeAuthMember" style="display: none;">修改</span>
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="x-row x-desc">
                      生码后，还可设置二维码有效期、打开方式等
                    </div>
                  </div>
                </div>
              </div>

              <input id="tjurl" type="hidden" value=""/>
              <input id="tjuid" type="hidden" value=""/>
              <input id="tjcoding" type="hidden" value=""/>
              <input id="isturn" type="hidden" value=""/>

              <div class="none" id="length-over-tip" role="tooltip">
                <div style="color: #999;">
                  内容已超150字，生成的二维码图案过于复杂不易扫描，请使用
                  <a class="link text-blue" href="help/60448.html" target="_blank">活码</a>
                </div>
              </div>

              <div class="submit text-center" style="padding-bottom: 20px">
                <button class="btn green btn-green-shadow btn-cli-green" data-loading-text="正在生成..." id="click-create">
                  生成活码
                </button>
                <a class="btn btn-fw green none" data-generate-qractive="" data-isactives="2" href="javascript:;" id="change_active2">生成活码</a>
              </div>
            </div>
          </div>

          <!-- 二维码区域 -->
          <div class="include-qrfun-origin">
            <div class="qrbox col-md-4 multimedia-qrcode-wrapper noQrCode noQrCode" data-is_create_code="0" id="qrfun-box">
              <div class="qrcode-wrapper">
                <div class="qrfun-tab-content code-tab-content">
                  <img id="snapQrimage" src="" style="display: none"/>

                  <div class="has-code-action after-create-qrfun-item">
                    <div class="choose-label-style-tpl isSimpleStyle" id="choose_label_style_tpl">
                      <div class="choose_label_style_tpl_name" data-container="body" data-content="" data-placement="bottom">
                        标签样式：
                      </div>
                      <div class="choose-tpl-action cliLink" id="toggle_label_style_tpl">
                        <span class="choose-tpl-action-text" id="choose_tpl_action_text">更换</span>
                        <i class="clifont anticon-cli-angle-right"></i>
                      </div>
                    </div>
                  </div>

                  <div class="qrcode">
                    <table class="qrimage-wrap-loading qrimage-wrap b-a text-center" data-loading-text="&lt;img style='margin-top: 126px;margin-bottom: 126px;width:48px;opacity:0.3;' src='//static.clewm.net/cli/images/cli-loading@2x.gif'&gt;" data-qrimage-wrap="" id="click-create" style="border-radius:4px;">
                      <tr>
                        <td class="qrimage-td-h" data-is_create_code="0" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" src=""/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>
                  </div>

                  <!-- 工具区域 -->
                  <div class="tools-v2 tools after-create-qrfun-item" style="display: block;">
                    <div class="when-have-code">
                      <div class="tab-container">
                        <div class="qr-style-tab-item template-item">
                          <div class="more-setting-info-wrap-box" id="more-setting-info-wrap-box">
                            <div class="qrcode-box more-setting-info-wrap">
                              <span class="more-setting-codetype-text">QR Code</span>，
                              <span class="more-setting-level-text">30%容错</span>
                              <span class="more-setting-size-text">，400×400px</span>
                              <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                            </div>
                          </div>

                          <div class="qr-style-tab-item beautify" style="display: block; text-align: center; font-size: 0;margin-bottom: 8px;">
                            <div class="btn-block new-up-icon-btn-wrapper" data-container="body" data-content="该码制暂不提供此功能" data-placement="bottom" id="upload-and-style-btn-wrapper" style="width: 100%;display: inline-flex;display: -ms-inline-flexbox;">
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="upload-logo-btn" style="margin-right: 6px;" type="button">上传Logo</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="new-qr-style-func" type="button">二维码美化</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn none" id="edit-filed-btn" style="margin-left: 6px;" type="button">修改字段</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 底部工具栏 -->
                  <ul class="sub_nav qrcode-bottom sub_mobile_nav clearfix pull-right" id="qrcode-bottom-tool">
                    <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="mh_link">
                      <div class="popover_link_wrap">
                        <a class="tab_sep m-r-0 divider code-meihua-style" href="https://mh.cli.im" onclick="StatisticsData(120,147101)" style="display: inline-block;" target="_blank" title="快速美化二维码图案，上传logo等">
                          <span class="clifont anticon-meihua"></span>美化
                        </a>
                        <div class="top-mark"></div>
                        <div class="drop-down">
                          <span class="code-tools-adv-edit-tip">快速美化二维码图案，上传logo等</span>
                        </div>
                      </div>
                    </li>
                    <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="style-label-created">
                      <div class="popover_link_wrap">
                        <a href="javascript:;" id="style-label-created-link">
                          <span class="tab_sep m-r-0 code-meihua-style">
                            <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                          </span>
                        </a>
                        <div class="top-mark"></div>
                        <div class="drop-down">
                          <span class="code-tools-adv-edit-tip">选择模板，填入数据，批量制作标签</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" data-backdrop="true" id="modal-alert">
      <div class="modal-dialog" style="margin-top: 100px">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-a-lg"></div>
        </div>
      </div>
    </div>

    <!-- modal-code-more-setting -->
    <div class="modal fade modal-code-more-setting" data-backdrop="static" data-keyboard="false" id="modal-code-more-setting" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">下载设置</h4>
          </div>
          <div class="modal-body">
            <div class="main-setting">
              <div class="wrap-item code-type-wrap" id="code-type-wrap">
                <div class="label-title">
                  码制<i class="cliIcon anticon anticon-QuestionCircle code-type-popover-wrapper" data-container="body" data-content="&lt;div class='common-popover-content'&gt;提供 QR Code、汉信码、 PDF417、Data Matrix4种最常见的码制的生成。&lt;a class='cliLink' href='https://cli.im/help/77753' target='_blank' onclick='StatisticsData(352,124334)'&gt;了解详情&lt;/a&gt;&lt;/div&gt;" data-placement="top" id="code-type-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                </div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="qr"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">QR Code</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="hanxin"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">汉信码</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="pdf417"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">PDF417</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="dm"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">Data Matrix</span>
                  </label>
                </div>
              </div>
              <div class="wrap-item code-type-wrap" id="code-level-wrap">
                <div class="label-title">
                  容错率<i class="cliIcon anticon anticon-QuestionCircle code-level-popover-wrapper" data-container="body" data-content="&lt;div class='common-popover-content'&gt;容错率设置越高，二维码生成的码点密度越高，可在遮挡越多的情况下被扫描出来。&lt;a class='cliLink' onclick='StatisticsData(352,124305)' href='https://cli.im/help/57415' target='_blank'&gt;了解详情&lt;/a&gt;&lt;/div&gt;" data-placement="top" id="code-level-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                </div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="L"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">7%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="M"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">15%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="Q"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">25%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="H"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">30%</span>
                  </label>
                </div>
              </div>
              <div class="wrap-item code-size-wrap" id="code-size-wrap">
                <div class="label-title">尺寸：</div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeSize" type="radio" value=""/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">400 x 400 px</span>
                  </label>
                </div>
              </div>
              <div class="wrap-item custom-size-wrap none" id="custom-size-wrap">
                <div class="label-title">输入尺寸：</div>
                <div class="input-wrap">
                  <div class="input-box">
                    <input class="custom-size-input" id="customSizeInput" name="codeSize" type="number" value="500"/>
                    <span class="unit-box">
                      <span class="unit-text">px</span>
                    </span>
                  </div>
                  <span class="size-tip">最大可设为1000px</span>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary success-btn" id="code-more-setting-submit" type="button">保存设置</button>
          </div>
        </div>
      </div>
    </div>

    <!-- modal-code-vector-fromat -->
    <div class="modal fade modal-code-vector-fromat" id="modal-code-vector-fromat" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">
              下载矢量格式
              <span class="modal-title-text">矢量文件不带美化样式和字段，<a class="cliLink" href="help/77747.html" onclick="StatisticsData(352,124317)" target="_blank" title="下载矢量格式了解详情">了解详情</a></span>
            </h4>
          </div>
          <div class="modal-body">
            <div class="main-setting">
              <div class="wrap-item code-vector-format" id="code-vector-format">
                <div class="label-title">矢量格式：</div>
                <div class="vector-content">
                  <div class="vector-download-item pdf-download" id="pdf-download" onclick="StatisticsData(352,124312)">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">PDF 矢量</span>
                    </div>
                  </div>
                  <div class="vector-download-item svg-download" id="svg-download" onclick="StatisticsData(352,124313)">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">SVG 矢量</span>
                    </div>
                  </div>
                  <div class="vector-download-item eps-download" id="eps-download" onclick="StatisticsData(352,124314)">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">EPS 矢量</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="wrap-item code-vector-package-download" id="code-vector-package-download">
                <div class="label-title">打包下载：</div>
                <div class="vector-content">
                  <div class="vector-download-item package-download" id="package-download" onclick="StatisticsData(352,124315)">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">打包3种格式的矢量格式文件</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- modal-alert-comment-box -->
    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
            <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
            <div id="comment-box"></div>
            <div class="feedback-item clearfix feedback-box">
              <div class="feedback-label">回复方式</div>
              <div class="feedback-content feedback-content-500">
                <div>
                  <label class="radio-inline">
                    <input id="receiveWechat" name="receiveMethodModal" type="radio" value="wechat"/> 微信快捷接收（推荐）
                  </label>
                  <label class="radio-inline">
                    <input id="receiveEmail" name="receiveMethodModal" type="radio" value="email"/> 邮箱接收
                  </label>
                </div>
                <div class="none m-t" id="email-area">
                  <input class="form-control text-xs" id="email" name="email" placeholder="我们将以邮件形式答复你" type="text" value=""/>
                </div>
                <div class="none m-t text-darkgrey" id="wechat-area">
                  <img alt="" class="m-r" id="wechat-qr" src=""/>
                  <div class="logo-in-qrcode">
                    <img alt="loading" src="../../assets/images/28ae6fb6d9ad.png"/>
                  </div>
                  <div class="scan-success none">
                    <i class="fa fa-check text-green"></i> 已关注
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer" style="border-top: none;">
            <span class="m-l text-danger none" id="error-message"></span>
            <button class="btn btn-outline b-green text-green" data-dismiss="modal" id="publish-cancel-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 11px;width:72px;">取消</button>
            <button class="btn green" data-loading-text="提交中..." id="publish-submit-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 12px;width:72px;">提交</button>
          </div>
        </div>
      </div>
    </div>

    <!-- modal-video-play-limit-alert -->
    <div class="modal fade" data-backdrop="true" id="modal-video-play-limit-alert">
      <div class="modal-dialog" style="margin-top: 100px;width: 1024px">
        <div class="modal-content">
          <div class="modal-body" style="padding: 32px 32px 24px">
            <button class="close" data-dismiss="modal" onclick="StatisticsData(83,21)" style="position: absolute;top: 20px;right: 20px;" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <div class="m-b-md common-over-limit-modal">
              <h4 class="text-center m-b" style="font-size: 20px;font-weight: bold;">
                <span class="clifont anticon-cli-warm-o" style="font-size:26px;color:#f0ad4e;vertical-align:text-top;margin-right:4px;margin-left: -26px"></span>升级后音视频无限次播放，还有更多专享功能
              </h4>
              <div style="position: relative;padding: 24px 126px 0 0;height: 90px;">
                <div class="currentUseStatus" style="width: 248px;color: #333;float:left;">
                  <div class="currentUseStatusCol" style="color: #333;">
                    <span>播放人数</span>
                  </div>
                  <div class="currentUseStatusInfo" style="font-size: 18px;color: #333;">
                    免费版 <span class="text-orange">5人</span>
                    付费版 <span class="text-orange">不限</span>
                  </div>
                </div>
                <p style="font-size: 16px;line-height: 24px;margin-bottom: 8px;">
                  任一付费版本，音视频播放人数无上限，长期有效（扫码播放音视频时，消耗高清流量，流量耗完后，仍然可以播放，但会转为低音质/流畅模式）
                </p>
                <div class="text-center" style="position: absolute;right: 18px;top: 0;">
                  <img alt="" src="../../assets/images/7e173f660339.png" style="width: 90px;height: 90px;"/>
                </div>
              </div>
              <div class="priceTableContainer m-t-md">
                <p style="font-size: 14px;line-height: 21px;">
                  基础版起支持随时加购扩容包， 购买多年享有额外折扣
                  <a class="pull-right text-blue" href="price.html" onclick="StatisticsData(83,35);__postClickLog({ fir: 28, sec: 152122 });" target="_blank">查看版本详情</a>
                </p>
                <div class="priceVersionListContainer">
                  <div class="priceVersionList">
                    <div class="priceVersionName">免费版 （当前版本）</div>
                    <ul>
                      <li>音视频提供试用</li>
                      <li>二维码长期有效</li>
                      <li>扫描次数不限</li>
                      <li>基础表单功能</li>
                    </ul>
                  </div>
                  <div class="priceVersionList">
                    <div class="priceVersionName">基础版 ¥780/年</div>
                    <ul>
                      <li class="up">不限 <span>音视频播放人数</span></li>
                      <li class="up">240G <span>音视频高清流量</span></li>
                      <li class="plus">隐藏草料标识</li>
                      <li class="plus">H5、小程序等多种打开方式</li>
                    </ul>
                  </div>
                  <div class="priceVersionList">
                    <div class="priceVersionName">
                      高级版 ¥1280/年
                      <img alt="" class="priceVersionRecommend" src="../../assets/images/b60aa7ff317a.png"/>
                    </div>
                    <ul>
                      <li class="up">不限 <span>音视频播放人数</span></li>
                      <li class="up">600G <span>音视频高清流量</span></li>
                      <li class="plus">2个高级成员</li>
                      <li class="plus">高级表单功能</li>
                      <li class="plus">操作历史可追溯</li>
                    </ul>
                  </div>
                  <div class="priceVersionList">
                    <div class="priceVersionName">旗舰版 ¥2680/年</div>
                    <ul>
                      <li class="up">不限 <span>音视频播放人数</span></li>
                      <li class="up">6000G <span>音视频高清流量</span></li>
                      <li class="plus">20个高级成员</li>
                      <li class="plus">批量导出功能</li>
                    </ul>
                  </div>
                  <div class="priceVersionList">
                    <div class="priceVersionName">行业专属版 ¥16800/年</div>
                    <ul>
                      <li class="up">不限 <span>音视频播放人数</span></li>
                      <li class="up">20000G <span>音视频高清流量</span></li>
                      <li class="plus">170个高级成员</li>
                      <li class="plus">企业专属小程序</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center">
              <a class="btn orange m-l" href="//user.cli.im/buy?create_from=146&amp;version=3" onclick="__postClickLog({ fir: 28, sec: 152121 });StatisticsData(122,31)" target="_blank">立即升级</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- convert-fail-modal -->
    <div class="m-convert-fail-modal none" id="convert-fail-modal">
      <div class="mask">
        <div class="modal">
          <div class="modal-header">
            <i class="clifont anticon-cli-warm-o text-orange m-r" style="font-size: 26px; vertical-align: -3px;"></i>视频转码失败
          </div>
          <div class="modal-body">
            <div class="modal-content">
              <p>系统检测上传的视频<span class="bold">有损</span>，无法完成转码。</p>
              <p>
                请更换视频再次上传，如有问题可
                <span class="cliLink" data-channelid="18" data-sobot="link">联系客服</span>
                帮你解决。
              </p>
            </div>
            <div class="text-center">
              <button class="btn btn-sm btn-fw green btn-confirm" data-dismiss="modal">我知道了</button>
            </div>
          </div>
          <div class="close-box">
            <i class="clifont anticon-cli-close-1"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- convert-audio-fail-modal -->
    <div class="m-convert-fail-modal none" id="convert-audio-fail-modal">
      <div class="mask">
        <div class="modal">
          <div class="modal-header">
            <i class="clifont anticon-cli-warm-o text-orange m-r" style="font-size: 26px; vertical-align: -3px;"></i>音频转码失败
          </div>
          <div class="modal-body">
            <div class="modal-content">
              <p>系统检测上传的音频<span class="bold">有损</span>，无法完成转码。</p>
              <p>
                请更换音频再次上传，如有问题可
                <a href="api/soboten/commonLink.html" rel="noindex,nofollow" target="_blank">联系客服</a>
                帮你解决。
              </p>
            </div>
            <div class="text-center">
              <button class="btn btn-sm btn-fw green btn-confirm" data-dismiss="modal">我知道了</button>
            </div>
          </div>
          <div class="close-box">
            <i class="clifont anticon-cli-close-1"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- modal-Multi-multimedia (仅样式定义，实际HTML结构需根据具体需求补充) -->
    <div class="modal fade" data-backdrop="true" id="modal-Multi-multimedia">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">音视频预览</h4>
          </div>
          <div class="modal-body">
            <img alt="音视频预览" src="" style="width: 100%; height: 100%;"/>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部内容区域 -->
    <div class="tab-file-box new-light bottom-white-line">
      <div class="page-main-content">
        <div class="nav-fixed-empty"></div>
        <div id="tab-nav">
          <ul class="tab-ul list_tab page-main-content">
            <li class="tab-item noMarginLeft active" data-id="591" data-name="功能介绍" data-tab-id="591" data-tab-item="" data-tab-path="info" data-tab-type="blog" data-tab-url="/multimedia" data-type="音视频">
              <a href="multimedia.html" rel="canonical" title="功能介绍">功能介绍</a>
            </li>
            <li class="tab-item" data-id="3601" data-name="讨论" data-tab-id="3601" data-tab-item="" data-tab-path="comment" data-tab-type="comment" data-tab-url="/multimedia/comment" data-type="音视频">
              <a href="multimedia/comment.html" id="comment-tab-item" rel="canonical" title="讨论">讨论(349)</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 文章内容区域 -->
    <div class="w-p100 p-b-lg tab-multimedia-box white tab-content-container">
      <div class="page-main-content white">
        <div class="article-tab-box clearfix" id="article">
          <div class="wordpress-article">
            <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
              <div class="wait-now" id="wait_now" style="display: none;">
                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
              </div>

              <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                <p>直接上传音视频生成二维码，扫码即可在线播放或收听，无需下载任何APP，也无需跳转到其他链接。</p>

                <h2>一、核心功能</h2>
                <h3>1. 多种音视频展示样式</h3>
                <p>提供音视频大卡片、小卡片等多种样式，搭配背景图、配色等，轻松做出简洁高级的展示效果。</p>
                <p><img alt="file" data-height="1076" data-width="1784" src="../../assets/images/93445db6c1d6.png"/></p>

                <h3>2. 一码展示多个音视频及更多内容</h3>
                <p>一个二维码可同时上传多个音频或视频，灵活组合图文、表格等内容，适用于多种场景。</p>

                <h3>3. 实时更新二维码内容</h3>
                <p>在后台修改或添加音视频后，扫码内容即时更新，码图案不变，无需重新生成。</p>

                <h3>4. 设置访问权限</h3>
                <p>通过加密二维码分享或设置指定成员组查看，确保只有授权用户能够扫描查看内容。<a href="help/50292.html" title="更多查看权限设置">查看更多权限设置</a></p>

                <h3>5. 统计扫描数据</h3>
                <p>可进入后台查看二维码的扫描人数/次数、扫描人、扫描时间、访问地点、设备信息等明细数据，关注码的传播情况。</p>

                <h2>二、更多功能</h2>
                <h3>1. 加上表单，替代纸质表格</h3>
                <ul>
                  <li><strong>在线表单</strong>：关联表单功能，用户扫码后可直接填写信息，适用于报名、签到等场景。</li>
                </ul>

                <h3>2. 二维码标签样式</h3>
                <ul>
                  <li><strong>多样标签</strong>：提供多种标签样式，支持颜色调整和Logo添加。</li>
                  <li><strong>多平台适配</strong>：下载适合线上分享或线下打印的二维码版本，满足不同应用环境。</li>
                </ul>

                <h2>三、免费与付费权益</h2>
                <h3>1. 免费版</h3>
                <ul>
                  <li><strong>播放限制</strong>：每个音视频仅限5人次播放。</li>
                  <li><strong>存储期限</strong>：上传音视频保存30天，失效后将无法查看。</li>
                </ul>

                <h3>2. 付费权益</h3>
                <ul>
                  <li><strong>不限播放人数</strong>：每个音视频不限播放人数和次数。</li>
                  <li><strong>长期存储</strong>：内容长期保留，不会失效。</li>
                  <li><strong>高清播放</strong>：提供高清流量，基础版 240G ; 高级版 600G；旗舰版 6,000G；行业专属版 20,000G，支持高清播放。</li>
                  <li><strong>展示企业品牌形象</strong>：不显示草料标识，提升品牌形象。</li>
                  <li><strong>团队协作</strong>：支持多人协作管理，适合团队使用。</li>
                </ul>
                <p><a href="help/48216.html" title="了解更多付费权益">了解更多付费权益</a></p>

                <h2>四、相关模板</h2>
                <p>二维码不仅可以展示音视频，还可以展示任何你想展示的信息，帮助你完成各项事务管理。</p>
                <p>以下模板来自真实用户案例，你可以快速借鉴，轻松搭建你的二维码。</p>

                <!-- 模板卡片 -->
                <div class="link-card-list default theme-">
                  <a class="link-card-item" href="template/detail/38373533.html" rel="" target="_blank" title="产品详情介绍">
                    <div class="link-card-item-image">
                      <img alt="产品详情介绍" src="../../assets/images/193493e9bf30.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">产品详情介绍</p>
                      <p class="link-card-item-description">展示产品介绍图文视频等，内容随时更新</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>

                  <a class="link-card-item" href="template/detail/9802449.html" rel="" target="_blank" title="产品使用说明">
                    <div class="link-card-item-image">
                      <img alt="产品使用说明" src="../../assets/images/4a209950e0d5.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">产品使用说明</p>
                      <p class="link-card-item-description">展示安装使用视频、说明书等，附在产品上，消费者扫码查看</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>

                  <a class="link-card-item" href="template/detail/32982628.html" rel="" target="_blank" title="作业提交打卡">
                    <div class="link-card-item-image">
                      <img alt="作业提交打卡" src="../../assets/images/bb5e0b9d5c59.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">作业提交打卡</p>
                      <p class="link-card-item-description">扫码查看学习视频，提交作业完成情况</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>
                </div>

                <p><br/></p>
                <p><a class="wordpressBtn text-white" href="template.html">查看全部模板</a></p>

                <h2>五、常见问题</h2>
                <h3>1. 上传音视频有大小限制吗？</h3>
                <p>所有版本都不限音视频文件大小或时长，可在一个二维码中上传多个音视频，音视频总存储空间不限。</p>
                <blockquote>
                  <p>过大的视频有可能会出现上传失败，建议超过500M的视频，进行合理分段存储再上传，也可以让扫码者的加载更快，体验更佳。</p>
                </blockquote>

                <h3>2. 可以上传哪些音视频格式？</h3>
                <ul>
                  <li><strong>视频格式</strong>：mp4, flv, avi, mov</li>
                  <li><strong>音频格式</strong>：m4a, mp3, wav, ogg, asf, au, voc, aiff, rm, m4a, svcd, vcd</li>
                </ul>

                <h3>3. 音视频播放有没有限制？</h3>
                <ul>
                  <li><strong>免费用户</strong>：前 5 人可试看，音视频保存 30 天；</li>
                  <li><strong>付费用户</strong>：不限播放人数和次数，长期有效。</li>
                </ul>

                <h3>4. 什么是高清流量？</h3>
                <p>在二维码内容中上传的音频、视频被播放时，会消耗账号中的高清流量。
                音视频按转码后的实际大小计算，如原视频20M，转码后为10M，则播放1次消耗10M高清流量。</p>

                <h3>5. 高清流量用完后会怎样？</h3>
                <p>流量用完后，音视频仍可播放，但音频音质会降为普通，视频清晰度降为流畅模式。增购高清流量包可恢复高清播放，1200元/5000G。</p>

                <h3>6. 付费版本到期后会有什么影响？</h3>
                <p>到期后仍可无限次播放，如剩余流量充足，播放质量不受影响。<br/>
                若流量耗尽，播放模式将降为普通音质与流畅清晰度，续费后可恢复高清播放。</p>
              </div>
            </div>
            <div class="wikiOutlineWrapper" ref="outlineWrapper">
              <ul class="wikiOutlineContainer" ref="outlineContainer">
                <li v-for="(item, index) in outlineItems"
                    :key="index"
                    :class="['item', { active: activeOutlineIndex === index }]"
                    :data-target-header="item.tagName"
                    @click="scrollToHeader(item, index)">
                  <span>{{ item.text }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Vue 逻辑
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// 响应式数据
const isUploading = ref(false)
const uploadProgress = ref(0)
const mediaData = ref(null)
const qrCodeImage = ref('')
const selectedVisitorType = ref('3')

// Wiki outline navigator instance
const wikiOutlineNavigatorIns = ref(null)

// Outline navigation state
const outlineItems = ref<Array<{ text: string, tagName: string, element: HTMLElement }>>([])
const activeOutlineIndex = ref(-1)
const isScrolling = ref(false)
const outlineWrapper = ref<HTMLElement>()
const outlineContainer = ref<HTMLElement>()

// 方法
const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    isUploading.value = true
    // 模拟文件上传逻辑
    simulateUpload(file)
  }
}

const simulateUpload = (file) => {
  let progress = 0
  const interval = setInterval(() => {
    progress += 10
    uploadProgress.value = progress
    if (progress >= 100) {
      clearInterval(interval)
      isUploading.value = false
      handleUploadSuccess(file)
    }
  }, 200)
}

const handleUploadSuccess = (file) => {
  mediaData.value = {
    name: file.name,
    size: file.size,
    type: file.type,
    duration: '00:30' // 模拟时长
  }
}

const generateQRCode = () => {
  if (!mediaData.value) {
    alert('请先上传音视频文件')
    return
  }
  // 模拟生成二维码
  qrCodeImage.value = ''
}

const handleVisitorTypeChange = (type) => {
  selectedVisitorType.value = type
}

// Outline navigation functions
const initOutlineNavigation = () => {
  nextTick(() => {
    collectHeaders()
    setupScrollListener()
  })
}

const collectHeaders = () => {
  // Collect only h2 and h3 elements from the wordpress article content
  const headers = document.querySelectorAll('.wordpress_article_info_box h2, .wordpress_article_info_box h3')
  outlineItems.value = Array.from(headers).map((header: HTMLElement) => ({
    text: header.textContent || '',
    tagName: header.tagName,
    element: header
  }))
  
  // Set the first item as active by default
  if (outlineItems.value.length > 0) {
    activeOutlineIndex.value = 0
  }

  // Show or hide outline container based on whether there are headers
  if (outlineWrapper.value) {
    if (outlineItems.value.length > 0) {
      outlineWrapper.value.style.display = 'block'
      outlineContainer.value?.classList.add('hasOutline')
    } else {
      outlineWrapper.value.style.display = 'none'
      outlineContainer.value?.classList.remove('hasOutline')
    }
  }
}

const setupScrollListener = () => {
  window.addEventListener('scroll', updateActiveOutline)
}

const updateActiveOutline = () => {
  if (isScrolling.value || outlineItems.value.length === 0) return

  let activeIndex = 0 // Default to first item
  const scrollTop = window.scrollY
  const headerOffsetTop = 100 // Offset for header detection

  // Find the current active header based on scroll position
  for (let i = 0; i < outlineItems.value.length; i++) {
    const element = outlineItems.value[i].element
    const elementTop = element.offsetTop - headerOffsetTop
    
    if (scrollTop >= elementTop) {
      activeIndex = i
    } else {
      break
    }
  }

  activeOutlineIndex.value = activeIndex
}

const isElementScrolled = (element: HTMLElement): boolean => {
  const rect = element.getBoundingClientRect()
  return rect.top <= 100 // Element is considered "scrolled past" when it's 100px from top
}

const scrollToHeader = (item: { element: HTMLElement, text: string }, index: number) => {
  if (activeOutlineIndex.value === index || isScrolling.value) return

  activeOutlineIndex.value = index
  isScrolling.value = true

  // Smooth scroll to the target header
  const offsetTop = item.element.offsetTop
  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })

  // Reset scrolling flag after animation
  setTimeout(() => {
    isScrolling.value = false
  }, 800)
}

// 生命周期
onMounted(() => {
  // 初始化组件
  console.log('Multimedia component mounted')
  
  // Initialize outline navigation
  initOutlineNavigation()
})

onUnmounted(() => {
  // 清理资源
  console.log('Multimedia component unmounted')
  
  // Cleanup if needed
  wikiOutlineNavigatorIns.value = null
})
</script>

<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/8ccc59cc9486.css" scoped/>
<style src="../../assets/css/9ded6fd30ce6.css" scoped/>
<style src="../../assets/css/badea43cb35b.css" scoped/>
<style src="../../assets/css/b42bbd4c9ea8.css" scoped/>
<style src="../../assets/css/dbece38160fc.css" scoped/>
<style src="../../assets/css/c1580d903c0f.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/4f203d7b339f.css" scoped/>
<style src="../../assets/css/9afc7d6ec6d9.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>

<style>

/* 基础样式 */
html {
  overflow-x: hidden;
}

.wikiOutlineWrapper{
  margin-top: 0;
}

.cliLink {
  color: #166bc7;
}

.cliLink:hover,
.cliLink:active {
  color: #114A78;
}

#top-nav-home {
  color: #3cb067;
  font-weight: bold;
}

.alert-violation {
  background-color: #fcf8e3;
  position: fixed;
  z-index: 9;
  padding: 35px 25px;
  bottom: -134px;
  width: 100%;
  transition: bottom .5s ease-in-out;
}

.alert-violation.show {
  bottom: 0;
  transition: bottom .5s ease-in-out;
}

.text-blue {
  color: #166bc7;
}

.free_user_tips {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(242,242,242,.8);
  color: #999;
  line-height: 40px;
}

.ep-tip {
  background-color: #E6F7FF;
  border: 1px solid #91d5ff;
  color:#666;
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.ep-tip a {
  color: #357bb3;
  text-decoration: none;
}

.uploading .progress-bar.green {
  color: transparent;
}

.convert-fail {
  position: relative;
  margin: 110px auto 0;
  padding-bottom: 24px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  max-width: 100%;
  display: none;
}

.convert-fail-after-code {
  margin: 130px auto 0;
}

.convert-fail i {
  position: relative;
  top: 1px;
  margin-right: 2px;
}

.convert-fail .reUpload {
  margin-left: 2px;
}

.x-configPanel {
  padding-top: 24px;
  text-align: left;
  margin: 0 24px 24px;
}

.upload-wrapper[data-type="video"] .x-configPanel {
  border-top: 0;
  margin-top: 0;
}

.x-form .x-row {
  display: flex;
  font-size: 14px;
  align-items: center;
  margin-top: 10px;
}

.x-form .x-row:first-child {
  margin-top: 0;
}

.x-form .x-row .x-label {
  flex: none;
  width: 120px;
  color: rgba(0, 0, 0, 0.45);
}

.x-form .x-row .x-content {
  color: rgba(0, 0, 0, 0.65);
  flex: auto;
}

.x-form .x-row .x-content label {
  margin-left: 36px;
  cursor: pointer;
}

.x-form .x-row .x-content label:first-child {
  margin-left: 0;
}

.x-form .x-row .x-label *, .x-form .x-row .x-content * {
  vertical-align: middle;
}

.x-check-content {
  display: flex;
}

.x-question {
  display: inline-block;
  font-size: 0;
}

.x-form .x-row.x-desc {
  font-size: 12px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 12px;
}

.x-md-check {
  padding-left: 16px;
}

.x-md-check input {
  width: 16px;
  height: 16px;
  margin-left: -16px;
}

.x-md-check > i {
  height: 16px;
  margin-left: -16px;
  margin-right: 20px;
  top: 2px;
}

.x-md-check > i:before {
  border: 1px solid #d9d9d9;
  width: 16px;
}

.x-visibleAuthType .x-md-check input[type=radio]:checked+i:after {
  left: 5px;
  top: 5px;
}

a[data-new-create-multimedia-style] {
  color: #166bc7 !important;
}

a[data-new-create-multimedia-style]:hover {
  border-color: #00A13B !important;
  cursor: pointer;
}

a[data-new-create-multimedia-style]:hover {
  color: #053979 !important;
}

.mobile-scene-min-width {
  min-width: 1200px;
}

.x-initContent {
  visibility: visible;
}

.bottom-white-line {
  border-bottom: 1px solid #fff;
}

.fullscreen-icon {
  width: 24px;
  height: 24px;
  background: url(//static.clewm.net/static/images/all-view_cdbf423.png) no-repeat;
  background-position: 6px 6px;
  background-size: 50%;
  display: inline-block;
}

.fullscreen-icon:hover {
  background-position: 6px -18px;
}

/* 模态框样式 */
.modal-code-more-setting .main-setting {
  padding: 20px 0;
}

.modal-code-more-setting .wrap-item {
  margin-bottom: 20px;
}

.modal-code-more-setting .label-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.modal-code-more-setting .radio-content {
  display: flex;
  gap: 12px;
}

.modal-code-more-setting .ant-radio-wrapper {
  display: flex;
  align-items: center;
}

.modal-code-more-setting .input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-code-more-setting .input-box {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}

.modal-code-more-setting .custom-size-input {
  border: none;
  padding: 8px 12px;
  outline: none;
  width: 80px;
}

.modal-code-more-setting .unit-box {
  background: #fafafa;
  border-left: 1px solid #d9d9d9;
  padding: 8px 12px;
  color: #666;
}

.modal-code-more-setting .size-tip {
  color: #666;
  font-size: 12px;
}

.modal-code-vector-fromat .vector-content {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-code-vector-fromat .vector-download-item {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  min-width: 120px;
}

.modal-code-vector-fromat .vector-download-item:hover {
  border-color: #4caf50;
  background: #f9f9f9;
}

.modal-code-vector-fromat .download-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.modal-code-vector-fromat .format-text {
  font-size: 12px;
  color: #666;
}

/* 评论模态框样式 */
.feedback-box {
  margin: 16px 0;
}

.feedback-box .feedback-label {
  font-size: 14px;
  color: #777;
  width: 95px;
  line-height: 38px;
  float: left;
}

.feedback-box .feedback-content-500 {
  width: 408px;
}

.feedback-box .feedback-content {
  max-width: 100%;
  float: left;
}

.feedback-box .feedback-content .radio-inline {
  color: #666;
  margin-top: 10px;
  margin-right: 16px;
}

#wechat-area {
  position: relative;
  height: 100px;
}

#wechat-qr {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}

.logo-in-qrcode {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 20px;
  height: 20px;
}

.logo-in-qrcode img {
  width: 100%;
  height: 100%;
}

.scan-success {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 100px;
  color: rgba(0, 0, 0, 0.87);
}

#email {
  width: 300px;
  border-radius: 4px;
}

#error-message {
  font-size: 12px;
}

/* 价格表样式 */
.priceTableContainer {
  margin: 20px 0;
}

.priceVersionListContainer {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.priceVersionList {
  flex: 1;
  min-width: 180px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  background: #fff;
}

.priceVersionName {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
  position: relative;
}

.priceVersionRecommend {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 60px;
  height: auto;
}

.priceVersionList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.priceVersionList li {
  padding: 6px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.priceVersionList li.up {
  color: #4caf50;
  font-weight: bold;
}

.priceVersionList li.plus {
  color: #2196f3;
}

.priceVersionList li span {
  font-weight: normal;
}

.text-orange {
  color: #ff5722;
}

/* 转换失败模态框样式 */
.m-convert-fail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-convert-fail-modal .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.m-convert-fail-modal .modal {
  position: relative;
  background: #fff;
  border-radius: 4px;
  max-width: 500px;
  width: 90%;
  z-index: 1;
}

.m-convert-fail-modal .modal-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.m-convert-fail-modal .modal-body {
  padding: 20px;
}

.m-convert-fail-modal .modal-content p {
  margin: 8px 0;
  line-height: 1.5;
  color: #666;
}

.m-convert-fail-modal .bold {
  font-weight: bold;
  color: #ff5722;
}

.m-convert-fail-modal .text-center {
  text-align: center;
  margin-top: 20px;
}

.m-convert-fail-modal .close-box {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  font-size: 20px;
  color: #999;
}

.m-convert-fail-modal .close-box:hover {
  color: #333;
}

.m-convert-fail-modal.none {
  display: none;
}

/* 其他样式补充 */
.btn-confirm {
  background: #4caf50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-confirm:hover {
  background: #45a049;
}

.none {
  display: none !important;
}

.m-b {
  margin-bottom: 16px;
}

.m-t {
  margin-top: 16px;
}

.m-t-md {
  margin-top: 24px;
}

.m-r {
  margin-right: 8px;
}

.m-l {
  margin-left: 8px;
}

.pull-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.common-over-limit-modal {
  padding: 20px;
}

.currentUseStatus {
  margin-bottom: 16px;
}

.currentUseStatusCol {
  font-weight: bold;
  margin-bottom: 4px;
}

.btn.orange {
  background: #ff5722;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
}

.btn.orange:hover {
  background: #e64a19;
  color: #fff;
  text-decoration: none;
}

/* 模板卡片样式 */
.link-card-list.default {
  display: flex;
  margin: 16px 0;
  justify-content: left;
}

.link-card-item-image {
  margin-bottom: 24px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-card-item-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 2px;
  pointer-events: none;
}

.link-card-list .link-card-item {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  border: 1px solid #f7f8f9 !important;
  padding: 16px !important;
  margin-bottom: 0;
  border-radius: 2px !important;
  width: 200px;
  transition: box-shadow 200ms ease-in-out;
  box-shadow: 0px 0px 14px 0px #f7f8f9 !important;
}

.link-card-item-content {
  flex: 1;
}

.link-card-list .link-card-item::before {
  display: none;
}

.link-card-list .link-card-item:hover {
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .05) !important;
}

.link-card-list .link-card-item:hover .link-card-item-btn {
  color: #fff;
  background-color: #4caf50;
}

.link-card-item:first-child {
  margin-left: 0;
}

.link-card-item .link-card-item-title {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
}

.link-card-item-btn {
  margin: 0 auto;
  color: #4caf50;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 14px;
  transition: all 200ms ease-in-out;
}

.link-card-item .link-card-item-description {
  font-size: 14px;
  color: #767676;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.link-card-list .link-card-item .divider {
  width: 100%;
  height: 1px;
  background-color: #f7f8f9;
  margin: 10px 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .link-card-list.default {
    flex-direction: column;
  }

  .link-card-item-image {
    max-height: 100vw;
    height: auto;
  }

  .link-card-list .link-card-item {
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
  }

  .priceVersionListContainer {
    flex-direction: column;
  }

  .priceVersionList {
    min-width: auto;
  }

  #modal-Multi-multimedia .modal-dialog {
    width: 95%;
    margin-left: -47.5%;
  }

  .modal-code-more-setting .radio-content {
    flex-direction: column;
    gap: 8px;
  }

  .modal-code-vector-fromat .vector-content {
    justify-content: center;
  }

  .feedback-box .feedback-label {
    width: 100%;
    float: none;
    margin-bottom: 8px;
  }

  .feedback-box .feedback-content {
    width: 100%;
    float: none;
  }

  .currentUseStatus {
    width: 100%;
    float: none;
    margin-bottom: 12px;
  }

  .common-over-limit-modal img {
    position: static;
    margin-top: 12px;
  }

  .common-over-limit-modal div[style*="position: absolute"] {
    position: static !important;
  }
}
</style>
